<style include="common cros-button-style">
  #container {
    border-radius: 16px;
    display: grid;
    grid-template-areas:
      '. slot           slot    slot      .'
      '. image          image   image     .'
      '. .              .       .         .'
      '. message        message message   .'
      '. mainpage-desc  .       thumbnail .'
      '. .              .       .         .';
    grid-template-columns: 20px auto 192px auto 20px;
    grid-template-rows: auto auto 20px 192px 1fr 20px;
    height: 100%;
  }

  #container.zero-state-disabled {
    grid-template-areas:
      '. slot          .'
      '. image         .'
      '. .             .'
      '. thumbnail     .'
      '. mainpage-desc .'
      '. .             .';
    grid-template-columns: 20px minmax(0,1fr) 20px;
    grid-template-rows: auto auto 20px 130px 1fr 18px;
  }

  #container.jelly-disabled {
    border: 1px solid var(--cros-separator-color);
    grid-template-areas:
      '. slot           slot    slot      .'
      '. image          image   image     .'
      '. .              .       .         .'
      '. message        message message   .'
      '. mainpage-desc  .       thumbnail .'
      '. .              .       .         .';
    grid-template-columns: 20px minmax(0, 1fr) 16px 106px 20px;
    grid-template-rows: auto minmax(158px, 220px) 20px 106px auto 24px;
  }

  #container.jelly-disabled.zero-state-disabled {
    grid-template-rows: auto minmax(158px, 220px) 20px auto 106px 24px;
  }

  :host-context(body.jelly-enabled) #container {
    background-color: var(--cros-bg-color);
  }

  #ambientLabel {
    align-items: center;
    background: none;
    border: none;
    display: flex;
    flex-flow: row nowrap;
    grid-area: slot;
    justify-content: space-between;
    margin-top: 12px;
  }

  #ambientSubpageLink {
    --cr-icon-button-size: 44px;
    /* Make the arrow align with the thumbnail image */
    margin-inline-end: -18px;
  }

  #ambientLabel>h2 {
    color: var(--cros-text-color-primary);
    font: var(--personalization-app-label-font);
    margin: 12px 0;
  }

  #ambientLabel.enterprise {
    opacity: var(--cros-disabled-opacity);
  }

  #messageContainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    grid-area: message;
    justify-content: space-between;
  }

  #messageContainer.jelly-disabled .text {
    color: var(--cros-text-color-secondary);
    font: var(--cros-body-1-font);
    line-height: 1.5;
    margin-top: 12px;
    text-align: center;
    width: unset;
  }

  #messageContainer .text {
    color: var(--cros-sys-on_primary_container, var(--cros-text-color-secondary));
    font: var(--cros-body-1-font);
    line-height: 1.5;
    margin-top: 56px;
    position: relative;
    text-align: center;
    width: 128px;
  }

  #messageContainer cr-button {
    margin-bottom: 50px;
    margin-top: 8px;
  }

  ambient-zero-state-svg {
    position: absolute;
  }

  #messageContainer.jelly-disabled cr-button {
    margin-top: 20px;
  }

  #imageContainer,
  #imagePlaceholder {
    display: flex;
    height: 100%;
    justify-self: center;
    max-width: 360px;
    min-width: 252px;
    width: 100%;
  }

  :host-context(body.jelly-enabled) #imageContainer,
  :host-context(body.jelly-enabled) #imagePlaceholder {
    aspect-ratio: 340/220;
    max-width: 460px;
    min-width: 278px;
  }

  .album-info-mainpage,
  #textPlaceholder {
    align-items: center;
    display: flex;
    grid-area: mainpage-desc;
    justify-content: center;
  }

  .jelly-disabled .album-info-mainpage,
  .jelly-disabled #textPlaceholder {
    align-items: flex-start;
  }

  #textPlaceholder .placeholder:first-child {
    margin-top: 8px;
  }

  .album-info-mainpage:not(.jelly-disabled) span {
    margin-inline: auto;
  }

  #imageContainer,
  #imagePlaceholder {
    grid-area: image;
  }

  #imageContainer[ambient-mode-managed] img.disabled {
    opacity: var(--cros-disabled-opacity);
  }

  #imageContainer img.disabled {
    /**
     * Use 50% for image instead of default cros-disabled-opacity.
     * TODO(b/236415314) get this into design system as a semantic value.
     */
    opacity: 50%;
  }

  #albumTitle {
    color: var(--cros-text-color-primary);
    font: var(--cros-display-7-font);
    margin-top: 10px;
  }

  #albumTitle.jelly-disabled {
    margin-top: 4px;
  }

  #albumDescription {
    color: var(--cros-text-color-secondary);
    font: var(--cros-body-2-font);
    margin-top: 2px;
  }

  #albumDescription.jelly-disabled {
    margin-top: 4px;
  }

  #collageContainer,
  #collagePlaceholder {
    border-radius: 12px;
    display: grid;
    gap: 2px;
    grid-area: thumbnail;
    overflow: hidden;
  }

  #collageContainer {
    border: 1px solid rgba(0, 0, 0, 0.08);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  #collageContainer.collage-1 .collage-item:first-child {
    grid-row: 1 / 3;
  }

  #collageContainer.collage-1 .collage-item:first-child,
  #collageContainer.collage-2 .collage-item:first-child,
  #collageContainer.collage-2 .collage-item:nth-child(2),
  #collageContainer.collage-3 .collage-item:nth-child(3) {
    grid-column: 1 / 3;
  }

  .collage-item {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  #buttonContainer {
    grid-area: buttons;
  }

  #buttonContainer .text {
    margin-inline-start: 8px;
  }

  #buttonContainer .preview-button-disabled {
    cursor: wait;
    pointer-events: none;
  }

  #buttonContainer cr-button {
    border-color: var(--cros-button-stroke-color-secondary);
    border-radius: 16px;
  }

  #buttonContainer .spinner {
    height: 20px;
    width: 20px;
  }

  #thumbnailContainer,
  #thumbnailPlaceholder {
    display: grid;
    grid-area: thumbnail;
    justify-self: center;
    max-width: 360px;
    min-width: 252px;
    overflow: hidden;
    width: 100%;
  }

  :host-context(body.jelly-enabled) #thumbnailContainer,
  :host-context(body.jelly-enabled) #thumbnailPlaceholder {
    max-width: 460px;
    min-width: 278px;
  }

  .thumbnail-item {
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  .thumbnail-item img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  #thumbnailContainer.thumbnail-0 {
    background-color: var(--personalization-app-grid-item-background-color);
    border-radius: 12px;
  }

  #thumbnailContainer.thumbnail-1 .thumbnail-item {
    border-radius: 60px;
  }

  #thumbnailContainer.thumbnail-2 {
    column-gap: 12px;
    grid-template-columns: 130px minmax(0, 1fr);
  }

  #thumbnailContainer.thumbnail-2 .thumbnail-item:first-of-type {
    clip-path: url(#squiggleClip);
  }

  #thumbnailContainer.thumbnail-2 .thumbnail-item:last-of-type {
    border-radius: 60px;
  }

  #thumbnailContainer.thumbnail-3 {
    column-gap: 8px;
    grid-template-columns: minmax(0, 1fr) 32px 32px;
  }

  #thumbnailContainer.thumbnail-3 .thumbnail-item:first-of-type {
    border-radius: 60px;
  }

  #thumbnailContainer.thumbnail-3 .thumbnail-item:last-of-type img,
  #thumbnailContainer.thumbnail-3 .thumbnail-item:nth-last-of-type(2) img {
    border-radius: 16px;
  }

</style>
<div class$="[[getPreviewContainerClass_(ambientModeEnabled_, loading_)]]" id="container">
  <!-- Use inline svg in order to reference the clip path by url() -->
  <svg fill="none"
      height="0"
      viewBox="0 0 130 130"
      width="0"
      xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="squiggleClip">
        <path d="M 1.4375 72.371094 C -0.332031 69.402344 -0.476562 65.738281 1.054688 62.640625 L 3.210938 58.28125 C 4.125 56.429688 4.457031 54.339844 4.15625 52.296875 L 3.457031 47.484375 C 2.957031 44.066406 4.226562 40.625 6.824219 38.347656 L 10.484375 35.148438 C 12.039062 33.785156 13.144531 31.984375 13.652344 29.980469 L 14.84375 25.265625 C 15.691406 21.914062 18.179688 19.222656 21.453125 18.113281 L 26.058594 16.554688 C 28.015625 15.894531 29.726562 14.652344 30.960938 12.996094 L 33.867188 9.097656 C 35.929688 6.324219 39.261719 4.789062 42.710938 5.019531 L 47.5625 5.339844 C 49.625 5.480469 51.679688 4.984375 53.453125 3.925781 L 57.628906 1.4375 C 60.597656 -0.332031 64.261719 -0.476562 67.359375 1.054688 L 71.71875 3.210938 C 73.570312 4.125 75.660156 4.457031 77.703125 4.15625 L 82.515625 3.457031 C 85.933594 2.957031 89.375 4.226562 91.652344 6.824219 L 94.851562 10.484375 C 96.214844 12.039062 98.015625 13.144531 100.019531 13.652344 L 104.734375 14.84375 C 108.085938 15.691406 110.777344 18.179688 111.886719 21.453125 L 113.445312 26.058594 C 114.105469 28.015625 115.347656 29.726562 117.003906 30.960938 L 120.902344 33.867188 C 123.675781 35.929688 125.210938 39.261719 124.980469 42.710938 L 124.660156 47.5625 C 124.519531 49.625 125.015625 51.679688 126.074219 53.453125 L 128.5625 57.628906 C 130.332031 60.597656 130.476562 64.261719 128.945312 67.359375 L 126.792969 71.71875 C 125.875 73.570312 125.542969 75.660156 125.84375 77.703125 L 126.542969 82.515625 C 127.042969 85.933594 125.773438 89.375 123.175781 91.652344 L 119.515625 94.851562 C 117.960938 96.214844 116.855469 98.015625 116.347656 100.019531 L 115.15625 104.734375 C 114.308594 108.085938 111.820312 110.777344 108.546875 111.886719 L 103.941406 113.445312 C 101.984375 114.105469 100.273438 115.347656 99.039062 117.003906 L 96.132812 120.902344 C 94.070312 123.675781 90.738281 125.210938 87.289062 124.980469 L 82.4375 124.660156 C 80.375 124.519531 78.320312 125.015625 76.546875 126.074219 L 72.371094 128.5625 C 69.402344 130.332031 65.738281 130.476562 62.640625 128.945312 L 58.28125 126.792969 C 56.429688 125.875 54.339844 125.542969 52.296875 125.84375 L 47.484375 126.542969 C 44.066406 127.042969 40.625 125.773438 38.347656 123.175781 L 35.148438 119.515625 C 33.785156 117.960938 31.984375 116.855469 29.980469 116.347656 L 25.265625 115.15625 C 21.914062 114.308594 19.222656 111.820312 18.113281 108.546875 L 16.554688 103.941406 C 15.894531 101.984375 14.652344 100.273438 12.996094 99.039062 L 9.097656 96.132812 C 6.324219 94.070312 4.789062 90.738281 5.019531 87.289062 L 5.339844 82.4375 C 5.480469 80.375 4.984375 78.320312 3.925781 76.546875 Z M 1.4375 72.371094 ">
        </path>
      </clipPath>
    </defs>
  </svg>
  <template is="dom-if" if="[[isPersonalizationJellyEnabled_]]">
    <template is="dom-if" if="[[!isAmbientModeAllowed_]]">
      <div id="ambientLabel" class="enterprise">
        <h2>$i18n{screensaverLabel}</h2>
        <cr-icon-button disabled
            id="ambientSubpageLink"
            iron-icon="cr:chevron-right">
        </cr-icon-button>
      </div>
      <div ambient-mode-managed
          aria-hidden="true"
          class="preview-image-container"
          id="imageContainer">
        <div class="preview-image-border"></div>
        <img class="preview-image disabled"
            src="//personalization/images/slideshow.png">
      </div>
      <div id="messageContainer">
        <ambient-zero-state-svg></ambient-zero-state-svg>
        <span class="text" id="turnOnDescription">
          $i18n{ambientModeMainPageEnterpriseUserMessage}
        </span>
        <cr-button class="primary action-button">
          <!-- TODO(b/258838122): on-click behavior -->
          <div>$i18n{ambientModeLearnMoreLabel}</div>
        </cr-button>
      </div>
    </template>
    <template is="dom-if" if="[[isAmbientModeAllowed_]]">
      <div id="ambientLabel">
        <h2 class="clickable" on-click="onClickAmbientSubpageLink_">
          $i18n{screensaverLabel}
        </h2>
        <cr-icon-button aria-label="$i18n{ariaLabelChangeScreensaver}"
            class="tast-open-subpage"
            id="ambientSubpageLink"
            iron-icon="cr:chevron-right"
            on-click="onClickAmbientSubpageLink_">
        </cr-icon-button>
      </div>
      <template is="dom-if" if="[[loading_]]" restamp>
        <div id="imagePlaceholder" class="placeholder"></div>
        <div id="thumbnailPlaceholder" class="placeholder"></div>
        <div id="textPlaceholder"
            class="preview-text-placeholder album-info-mainpage">
          <div class="placeholder"></div>
          <div class="placeholder"></div>
        </div>
      </template>
      <template is="dom-if" if="[[!loading_]]">
        <template is="dom-if" if="[[!ambientModeEnabled_]]" restamp>
          <div aria-hidden="true"
              class="preview-image-container"
              id="imageContainer">
            <div class="preview-image-border"></div>
            <img class="preview-image disabled"
                src="//personalization/images/slideshow.png">
          </div>
          <div id="messageContainer">
            <ambient-zero-state-svg></ambient-zero-state-svg>
            <span class="text" id="turnOnDescription">
              $i18n{ambientModeMainPageZeroStateMessageV2}
            </span>
            <cr-button aria-describedby="turnOnDescription"
                class="primary action-button"
                on-click="onClickAmbientModeButton_">
              <span>$i18n{ambientModeTurnOnLabel}</span>
            </cr-button>
          </div>
        </template>
        <template is="dom-if" if="[[ambientModeEnabled_]]">
          <!-- TODO(b/226235802) - Add failed/error state when no previewAlbums
               available. Currently, we show blank containers -->
          <template is="dom-if" if="[[previewAlbums_]]">
            <div id="imageContainer" class="preview-image-container">
              <div class="preview-image-border"></div>
              <img alt$="[[getAlbumTitle_(firstPreviewAlbum_)]]"
                  auto-src="[[getPreviewImage_(firstPreviewAlbum_)]]"
                  class="preview-image clickable"
                  is-google-photos is="cr-auto-img"
                  on-click="onClickPreviewImage_"
                  on-keypress="onClickPreviewImage_">
            </div>
            <div aria-hidden="true"
                class$="[[getThumbnailContainerClass_(thumbnailImages_)]]"
                id="thumbnailContainer"
                on-click="onClickThumbnails_"
                on-keypress="onClickThumbnails_">
              <template is="dom-repeat" items="[[thumbnailImages_]]">
                <div class="thumbnail-item">
                  <img auto-src="[[item.url]]"
                      is-google-photos
                      is="cr-auto-img">
                </div>
              </template>
            </div>
            <h3 aria-label$="[[getPreviewTextAriaLabel_(firstPreviewAlbum_, topicSource_, previewAlbums_)]]"
                class="preview-text-container album-info-mainpage"
                id="textContainer">
              <span aria-hidden="true"
                  id="albumTitle"
                  title="[[getAlbumTitle_(firstPreviewAlbum_)]]">
                [[getAlbumTitle_(firstPreviewAlbum_)]]
              </span>
              <span aria-hidden="true" id="albumDescription">
                [[getAlbumDescription_(topicSource_, previewAlbums_)]]
              </span>
            </h3>
          </template>
        </template>
      </template>
    </template>
  </template>
  <template is="dom-if" if="[[!isPersonalizationJellyEnabled_]]">
    <div id="ambientLabel">
      <h2 on-click="onClickAmbientSubpageLink_" class="clickable">
        $i18n{screensaverLabel}
      </h2>
      <cr-icon-button aria-label="$i18n{ariaLabelChangeScreensaver}"
          class="tast-open-subpage"
          id="ambientSubpageLink"
          iron-icon="cr:chevron-right"
          on-click="onClickAmbientSubpageLink_">
      </cr-icon-button>
    </div>
    <template is="dom-if" if="[[loading_]]" restamp>
      <div class="placeholder" id="imagePlaceholder"></div>
      <div class="preview-text-placeholder album-info-mainpage"
          id="textPlaceholder">
        <div class="placeholder"></div>
        <div class="placeholder"></div>
      </div>
      <div id="collagePlaceholder" class="placeholder"></div>
    </template>
    <template is="dom-if" if="[[!loading_]]">
      <template is="dom-if" if="[[!ambientModeEnabled_]]" restamp>
        <div aria-hidden="true"
            class="preview-image-container"
            id="imageContainer">
          <div class="preview-image-border"></div>
          <img class="preview-image disabled"
              src="//personalization/images/slideshow.png">
        </div>
        <div class="jelly-disabled" id="messageContainer">
          <span class="text" id="turnOnDescription">
            $i18n{ambientModeMainPageZeroStateMessage}
          </span>
          <cr-button aria-describedby="turnOnDescription"
              class="primary action-button"
              on-click="onClickAmbientModeButton_">
            <span>$i18n{ambientModeTurnOnLabel}</span>
          </cr-button>
        </div>
      </template>
      <template is="dom-if" if="[[ambientModeEnabled_]]">
        <template is="dom-if" if="[[previewAlbums_]]">
          <div class="preview-image-container" id="imageContainer">
            <div class="preview-image-border"></div>
            <img alt$="[[getAlbumTitle_(firstPreviewAlbum_)]]"
                auto-src="[[getPreviewImage_(firstPreviewAlbum_)]]"
                class="preview-image clickable"
                is-google-photos
                is="cr-auto-img"
                on-click="onClickPreviewImage_"
                on-keypress="onClickPreviewImage_">
          </div>
          <h3 aria-label$="[[getPreviewTextAriaLabel_(firstPreviewAlbum_, topicSource_, previewAlbums_)]]"
              class="preview-text-container album-info-mainpage jelly-disabled"
              id="textContainer">
            <span aria-hidden="true"
                id="albumTitle"
                title="[[getAlbumTitle_(firstPreviewAlbum_)]]">
              [[getAlbumTitle_(firstPreviewAlbum_)]]
            </span>
            <span aria-hidden="true" id="albumDescription">
              [[getAlbumDescription_(topicSource_, previewAlbums_)]]
            </span>
          </h3>
          <div aria-hidden="true"
              class$="[[getCollageContainerClass_(collageImages_)]]"
              id="collageContainer"
              on-click="onClickPhotoCollage_"
              on-keypress="onClickPhotoCollage_">
            <template is="dom-repeat" items="[[collageImages_]]">
              <img auto-src="[[item.url]]"
                  class="collage-item"
                  is-google-photos
                  is="cr-auto-img">
            </template>
          </div>
        </template>
      </template>
    </template>
  </template>
</div>
